<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Portfolio</title>

  <!-- 图标信息 -->
  <link rel="icon" href="./assets/images/our3.png" />
  <link rel="apple-touch-icon" href="./assets/images/our3.png" />
  <meta name="msapplication-TileImage" content="./assets/images/our3.png" />

  <!-- 引入bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">

  <!-- 引入动画库 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">

  <!-- 引入重置样式文件 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less">

  <!-- 引入公共样式common.less -->
  <link rel="stylesheet/less" href="./assets/css/common.less">

  <!-- 引入protfolio样式protfolio.less -->
  <link rel="stylesheet/less" href="./assets/css/protfolio.less">
</head>

<body>
  <!-- 背景 -->
  <div class="header_bg">
    <div class="bg_img">
      <img id="img_bg" src="./assets/images/bg.png" alt="">
      <div class="bg"></div>
    </div>
  </div>

  <!-- header -->
  <div id="header" class="header">
    <div class="container">
      <div class="header_nav">
        <div class="title wow bounceIn">Webworld</div>
        <div class="nav_list">
          <a href="./index.html" target="_self" class="wow fadeInUp" data-wow-delay="50ms">Home</a>
          <a href="./portfolio.html" target="_self" class="wow fadeInUp" data-wow-delay="150ms">Portfolio</a>
          <a href="./contact.html" target="_self" class="wow fadeInUp" data-wow-delay="200ms">Contact</a>
        </div>
      </div>
    </div>
  </div>

  <!-- PORT -->
  <div class="port_info">
    <div class="container">

      <div class="content">

        <div class="box">

          <!-- 大标题 -->
          <h2 class="wow fadeInUp">Webworld</h2>

          <!-- search -->
          <div class="search">
            <div class="title wow fadeInUp">SEARCH</div>
            <div class="inp form-control wow fadeInUp">
              <input type="text" placeholder="Search…">
            </div>
          </div>

          <!-- tweet -->
          <div class="tweet">
            <div class="title wow fadeInUp">TWEET.TWEET</div>
            <ul>
              <li class="wow fadeInUp" data-wow-delay="50ms">
                <span class="icon">“</span>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                  <span>4 days ago</span>
                </p>
              </li>
              <li class="wow fadeInUp" data-wow-delay="150ms">
                <span class="icon">“</span>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                  <span>4 days ago</span>
                </p>
              </li>
              <li class="wow fadeInUp" data-wow-delay="250ms">
                <span class="icon">“</span>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                  <span>4 days ago</span>
                </p>
              </li>
            </ul>
          </div>

          <!-- recent posts -->
          <div class="recent">
            <div class="title wow fadeInUp">RECENT POSTS</div>
            <p>Lorem Ipsum is simply text.</p>
            <p>dummy text of the print.</p>
            <p>ing and typesetting industry. Lorem </p>
          </div>

          <!-- BLOG TAGS -->
          <div class="blog">
            <div class="title wow fadeInUp">BLOG TAGS</div>
            <div class="blog_icon">
              <span class="wow fadeInUp" data-wow-delay="50ms">Design</span>
              <span class="wow fadeInUp" data-wow-delay="100ms">Development</span>
              <span class="wow fadeInUp" data-wow-delay="150ms">Envato</span>
              <span class="wow fadeInUp" data-wow-delay="200ms">Themeforest</span>
              <span class="wow fadeInUp" data-wow-delay="250ms">Themes</span>
              <span class="wow fadeInUp" data-wow-delay="300ms">Uncategorized</span>
              <span class="wow fadeInUp" data-wow-delay="350ms">WordPress</span>
            </div>
          </div>

        </div>
      </div>

      <div class="port_list">
        <ul>
          <li class="wow fadeInUp" data-wow-delay="50ms">
            <div class="info">
              <h3>LOREM IPSUM</h3>
              <p>WORDPRESS</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro1.png" alt="">
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="150ms">
            <div class="info">
              <h3>ESTABLISHEN</h3>
              <p>MAJEMTO</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro2.png" alt="">
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="250ms">
            <div class="info">
              <h3>RANDOMISED</h3>
              <p>DRUPAL</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro3.png" alt="">
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="350ms">
            <div class="info">
              <h3>ACCOMPANIED</h3>
              <p>BLOG DESIGNING</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro4.png" alt="">
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="450ms">
            <div class="info">
              <h3>CONSECTETUR</h3>
              <p>WEB DESIGNING</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro5.png" alt="">
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="550ms">
            <div class="info">
              <h3>EMBARRASSING</h3>
              <p>PRINT DESIGNING</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro6.png" alt="">
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="650ms">
            <div class="info">
              <h3>LOREM IPSUM</h3>
              <p>WEB DEVELOPING</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro7.png" alt="">
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="750ms">
            <div class="info">
              <h3>REASONABLE</h3>
              <p>CMS</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro8.png" alt="">
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="850ms">
            <div class="info">
              <h3>UNDOUBTABLE</h3>
              <p>JOOMLA</p>
            </div>
            <div class="img">
              <img src="./assets/images/pro9.png" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <!-- footer -->
  <div class="footer">

    <div class="footer_start">
      <div class="container">
        <ul>
          <li class="wow fadeInUp" data-wow-delay="50ms">
            <h1>Webworld</h1>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
              in some form, by injected humour, or randomised words which don't look even slightly believable. If you
              are going to use a passage of Lorem Ipsum, you need to be sure there
            </p>
          </li>
          <li class="wow fadeInUp" data-wow-delay="150ms">
            <h1>CONTACT</h1>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
              in
            </p>
            <div><span class="glyphicon glyphicon-map-marker"></span>New Dellhi</div>
            <div><span class="glyphicon glyphicon-envelope"></span>info@yourwebsite.com</div>
            <div><span class="glyphicon glyphicon-earphone"></span>890-09880-45590</div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="250ms">
            <h1>LATEST TWEETS</h1>
            <div class="lastest">
              <div class="icon"></div>
              <div class="info">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                </p>
                <p>1 Hour Ago</p>
              </div>
            </div>
            <div class="lastest">
              <div class="icon"></div>
              <div class="info">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
                <p>1 Hour Ago</p>
              </div>
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="350ms">
            <h1>NEWS LETTER</h1>
            <p>Type your email address below and recive our daily news letter for free</p>
            <div>
              <input type="text" placeholder="Email Address">
              <button>GO</button>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer_end">
      <div class="container">
        <div class="info wow fadeInUp">&copy; 2013 All right reserved. Theme by cssauthor.com
        </div>
        <div class="icon wow fadeInUp">
          <a href="javascript:void(0);" class="wow fadeInUp" data-wow-delay="50ms"></a>
          <a href="javascript:void(0);" class="wow fadeInUp" data-wow-delay="150ms"></a>
          <a href="javascript:void(0);" class="wow fadeInUp" data-wow-delay="250ms"></a>
        </div>
      </div>
    </div>

  </div>

  <!-- 回到顶部 -->
  <div id="back">
    <a href="#header" id="gotop">
      <img src="./assets/images/top.svg" alt="">
    </a>
  </div>

  <!-- 引入jquery -->
  <script src="./assets/js/jQuery.min.js"></script>

  <!-- 引入bootstrap.js -->
  <script src="./assets/js/bootstrap.min.js"></script>

  <!-- 引入less解析js -->
  <script src="./assets/js/less.min.js"></script>

  <!-- 引入懒加载js -->
  <script src="./assets/js/wow.min.repeat.js"></script>

  <script>
    window.onload = function () {

      new WOW().init();

      var backbtn = document.querySelector("#back");

      // 添加动画
      $("#back a").on("click", function () {
        $(this).parent().addClass("back");

        setTimeout(() => {
          $(this).parent().removeClass("back")
        }, 1000)
      })


      $(document).scroll(function () {

        //获取到滚动条到顶上的位置
        var distance = $(this).scrollTop();
        // console.log(distance);

        if (distance >= 200) {
          $("#back").show();
        } else {
          $("#back").hide();
        }
      })

      console.log($(".header").height());


      // 锚点的缓动效果 给特定链接元素 绑定点击事件
      $("#back a").on("click", function () {
        // 获取链接地址上面的路径部分(不包括域名)
        //系统替换后的结果
        var LocationReplace = location.pathname.replace(/^\//, '')
        var CurrentReplace = this.pathname.replace(/^\//, '')

        //系统获取的域名部分
        var LocationHostname = location.hostname
        var CurrentHostname = this.hostname


        //你必须是跳转到当前界面的链接  才能做锚点
        if (LocationReplace == CurrentReplace && LocationHostname == CurrentHostname) {
          //获取将要跳转的锚点位置
          var $target = $(this.hash)

          //一定要当他找到锚点元素的时候，才跳转锚点
          if ($target.length > 0) {
            //获取目标元素的位置
            var pos = $target.offset().top

            //让页面的body和html 滚动到 pos这个位置
            $("html,body").animate({
              //指的就是滚动条的距离
              scrollTop: pos
            }, 1000)

            $(this).parent().remove("back")
          }

          //阻止刷新界面
          return false

        }

      })


      /* 修改返回顶部盒子位置 */
      var containerWidth = document.querySelector(".container").offsetWidth;

      function reviseBack() {
        if (containerWidth == 1170) {
          backbtn.style.marginLeft = "470px"
          backbtn.style.left = "50%"
        }
        if (containerWidth == 970) {
          backbtn.style.marginLeft = "385px"
          backbtn.style.left = "50%"

        }
        if (containerWidth == 750) {
          backbtn.style.marginLeft = "275px"
          backbtn.style.left = "50%"

        }
        if (containerWidth < 750) {
          backbtn.style.left = "unset"
          backbtn.style.marginLeft = "0px"
          backbtn.style.right = "20px"
        }
      }

      reviseBack();

      var doc = document,
        ele = doc.documentElement,
        bodys = doc.bodys,
        clientWidth = ele ? ele.clientWidth : bodys.clientWidth,
        clientHeight = ele ? ele.clientHeight : bodys.clientHeight;

      if (clientWidth < 1500 && clientWidth > 660) {
        var mapH = clientWidth * 0.21;
        $(".map").height(mapH);
      } else if (clientWidth < 450) {
        $(".map").height(100);
      }

      if (clientWidth >= 450 && clientWidth <= 660) {
        $(".map").height(126);
      }

      window.onresize = function (e) {
        //浏览器改变的时候会触发这个事件
        containerWidth = document.querySelector(".container").offsetWidth
        //获取当前浏览器宽度
        var cw = ele ? ele.clientWidth : bodys.clientWidth;

        if (cw < 1500 && cw > 660) {
          mapH = cw * 0.21;

          $(".map").height(mapH);
        } else if (cw < 450) {
          $(".map").height(100);
        }

        if (cw >= 450 && cw <= 660) {
          $(".map").height(126);
        }

        if (cw !== clientWidth) {
          reviseBack();

          console.log($(".port_list ul li").height())
        }

      }
    }
  </script>
</body>

</html>